$(function () {
  'use strict';
  (function () {
  var screenWidth = $(window).width();  
  var screenHeight =  $(window).height()*.9;
    var $image = $('.img-container > img'),

        options = {
           strict: true,
          // responsive: false,
          // checkImageOrigin: false

          // modal: false,
          // guides: false,
          // highlight: false,
          // background: false,

          // autoCrop: false,
          // autoCropArea: 0.5,
          // dragCrop: false,
           movable: false,
           resizable: false,
          // rotatable: false,
           zoomable: true,
          // touchDragZoom: false,
          // mouseWheelZoom: false,

        minContainerHeight :  screenHeight,  
        minContainerWidth : screenWidth,  
        minCropBoxWidth: screenWidth,       
          // minContainerWidth: 320,
          // minContainerHeight: 180,

          // build: null,
          // built: null,
          // dragstart: null,
          // dragmove: null,
          // dragend: null,
          // zoomin: null,
          // zoomout: null,
           viewMode : 1,//显示  
        guides :true,//裁剪框虚线 默认true有  
        dragMode : null,  
				background : true,// 容器是否显示网格背景  
        movable : true,//是否能移动图片  
         cropBoxMovable :false,//是否允许拖动裁剪框  
        cropBoxResizable :false,//是否允许拖动 改变裁剪框大小  
          aspectRatio: 16/18,
          crop: function (data) {
         
          }
        };

    $image.on({
      'build.cropper': function (e) {
        console.log(e.type);
      },
      'built.cropper': function (e) {
        console.log(e.type);
      }
    }).cropper(options);

 // Methods
    $(document.body).on('click', '[data-method]', function () {
      var data = $(this).data(),
          $target,
          result;

      if (data.method) {
        data = $.extend({}, data); // Clone a new one

        if (typeof data.target !== 'undefined') {
          $target = $(data.target);

          if (typeof data.option === 'undefined') {
            try {
              data.option = JSON.parse($target.val());
            } catch (e) {
              console.log(e.message);
            }
          }
        }

        result = $image.cropper(data.method, data.option);

        if (data.method === 'getCroppedCanvas') {
      $('.uploaddone').html(result);
         var imgData =$('.uploaddone').find('canvas');
         console.log('imgData');
         console.log(imgData);
         imgData.attr('id','imgCanvas');
        var c= document.getElementById('imgCanvas');
        c.setAttribute("crossOrigin",'Anonymous')
        var imgCanvas=new Image();
        imgCanvas.setAttribute("crossOrigin",'Anonymous');
        imgCanvas.src=c.toDataURL();
				imgCanvas.className="upabc";
				imgCanvas.id="upabc";
				imgData.hide();
       $('.uploaddone').append(imgCanvas);
       initEndPage();
        }

        if ($.isPlainObject(result) && $target) {
          try {
            $target.val(JSON.stringify(result));
          } catch (e) {
            console.log(e.message);
          }
        }

      }
    });


    // Import image
    var $inputImage = $('#inputImage'),
        URL = window.URL || window.webkitURL,
        blobURL;

    if (URL) {
      $inputImage.change(function () {
      	$('#main').hide();
      	$('.img-container').show();
        var files = this.files,
            file;

        if (files && files.length) {
          file = files[0];

          if (/^image\/\w+$/.test(file.type)) {
            blobURL = URL.createObjectURL(file);
            $image.one('built.cropper', function () {
              URL.revokeObjectURL(blobURL); // Revoke when load complete
            }).cropper('replace', blobURL);
            $inputImage.val('');
          } else {
            alert('Please choose an image file.');
          }
        }
      });
    } else {
      $inputImage.parent().remove();
    }


  }());

});
